<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="小欢喜" confirm-type="search"></input>
			</view>
			<view class="action">

				<img src="../../static/history_icon.png">
			</view>
		</view>
		<!-- 分类导航 -->
		<scroll-view scroll-x class="bg-black nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{item.tabTitle}}
			</view>
		</scroll-view>
		<!-- 轮播图 -->
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500" indicator-active-color="#FFCE08">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<!-- <image :src="item.img" mode="aspectFill"></image> -->
				<img :src="item.img">
			</swiper-item>
		</swiper>


		<!-- tan切换 -->

		<!-- 推荐 -->
		<view v-if="TabCur==0" class="tab_plate">
			<!-- 分类 -->
			<view class="classes">
				<ul>
					<li @tap="typeGo(2,0,-1)">
						<img src="../../static/icon-teleplay.png" alt="">
						<span>电视剧</span>
					</li>
					<li @tap="typeGo(1,0,-1)">
						<img src="../../static/icon-movie.png" alt="">
						<span>电影</span>
					</li>
					<li @tap="typeGo(3,0,-1)">
						<img src="../../static/icon-variety.png" alt="">
						<span>综艺</span>
					</li>
					<li @tap="typeGo(4,0,-1)">
						<img src="../../static/icon-anime.png" alt="">
						<span>动漫</span>
					</li>
				</ul>
			</view>


			<!-- 今日推荐 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>今日推荐
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in today_vod" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至第{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button @tap="moreGo" class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 内地热播 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>内地热播
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in nd_vod" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至第{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 电影推荐 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>电影推荐
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_vod" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_score}}分</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 热播综艺 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>热播综艺
				</view>
				<view class="plate_detail">
					<ul>
						<li>
							<a href="#">
								<view class="plate_img">
									<img src="../../static/image/movie1.jpg" alt="">
									<view class="video_info">10分</view>
								</view>
								<span>花样年花</span>
							</a>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>



			<!-- 动漫新番 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>动漫新番
				</view>
				<view class="plate_detail">
					<ul>
						<li>
							<a href="#">
								<view class="plate_img">
									<img src="../../static/image/movie1.jpg" alt="">
									<view class="video_info">10分</view>

								</view>
								<span>花样年花</span>
							</a>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>
		</view>

		<!-- 电影 -->
		<view v-if="TabCur==1" class="tab_plate">

			<!-- 电影分类导航 -->
			<view class="reclassify">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="(item,index) in reclassify" :key="index" @tap="typeGo(1,item.type_id,index)">
						{{item.type_name}}
					</view>
				</scroll-view>

			</view>
			<!-- 最近热播 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>最近热播
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_rb" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_score}}分</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn" @tap="vodChangeOrder(1,1)">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 新片推荐 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>新片推荐
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_news" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_score}}分</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn"  @tap="vodChangeOrder(1,2)">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 排行榜滑动 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>排行榜
				</view>
				<view class="list_title">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="scroll-view-item_H" :class="noticeList == index?'text-bold':''" @tap="notice(index,1,item.type_id)" v-for="(item,index) in reclassify" :key="index">
							{{item.type_name}}榜
						</view>

					</scroll-view>
				</view>
				<view class="plate_detail plate_swiper">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="scroll-view-item_H" v-for="(item,index) in movie_rank" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_score}}分</view>
								<view class="plate_mark">
									{{index+1}}
								</view>
							</view>
							<span>{{item.vod_name}}</span>
						</view>

						<!-- <view class="scroll-view-item_H">
							<view class="plate_img">
								
							</view>
						</view> -->

					</scroll-view>

				</view>
				<view class="plate_handle btn_bg">
					<button class="cu-btn" @tap="rankGo(1)">查看完整榜单<text class="lg text-gray cuIcon-right"></text></button>

				</view>
			</view>



			<!-- 电影预告 -->

			<view class="plate">
				<view class="plate_title">
					<span></span>院线前瞻
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_yg" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="adv_mark">预告</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>

					</ul>
				</view>
				<view class="plate_handle btn_bg">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>

				</view>
			</view>


			<!-- 动作片 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>动作片
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_action" :key="index">

							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_score}}分</view>

							</view>
							<span>{{item.vod_name}}</span>

						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 欧美大片 -->
			<!-- 			<view class="plate">
				<view class="plate_title">
					<span></span>欧美大片
				</view>
				<view class="plate_big">
					<a href="#">
						<view class="plate_img">
							<img :src="movie_om[0].vod_pic">
							<view class="video_info">{{movie_om[0].vod_score}}分</view>
						</view>
						<span>{{movie_om[0].vod_name}}</span>
						<font>火之意志</font>
					</a>
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in 4" :key="index">
								<view class="plate_img">
									<img :src="movie_om[index+1].vod_pic" >
									<view class="video_info">{{movie_om[index+1].vod_score}}分</view>
								</view>
								<span>{{movie_om[index+1].vod_name}}</span>
								<font>火之意志</font>
						</li>
						
						
						
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view> -->

			<!-- 港味港星 -->
			<!-- 			<view class="plate">
				<view class="plate_title">
					<span></span>港味港星
				</view>
				<view class="plate_big">
					<a href="#">
						<view class="plate_img">
							<img :src="movie_gp[0].vod_pic">
							<view class="video_info">{{movie_gp[0].vod_score}}分</view>
						</view>
						<span>{{movie_gp[0].vod_name}}</span>
						<font>火之意志</font>
					</a>
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in 4" :key="index">
								<view class="plate_img">
									<img :src="movie_gp[index+1].vod_pic" >
									<view class="video_info">{{movie_gp[index+1].vod_score}}分</view>
								</view>
								<span>{{movie_gp[index+1].vod_name}}</span>
								<font>火之意志</font>
						</li>				
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view> -->


			<!-- 无恐不入 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>无恐不如
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in movie_kb" :key="index">

							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_score}}分</view>
							</view>
							<span>{{item.vod_name}}</span>
							<font>火之意志</font>

						</li>




					</ul>
				</view>
				<view class="plate_handle btn_bg">

					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 奇幻动画 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>奇幻动画
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in movie_cartoon" :key="index">

							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_score}}分</view>
							</view>
							<span>{{item.vod_name}}</span>
							<font>火之意志</font>

						</li>



					</ul>
				</view>
				<view class="plate_handle btn_bg">

					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>



		</view>

		<!-- 电视剧 -->
		<view v-if="TabCur==2" class="tab_plate">
			<!-- 电视剧分类导航 -->
			<view class="reclassify">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="(item,index) in reclassify" :key="index" @tap="typeGo(2,item.type_id,index)">
						{{item.type_name}}
					</view>
				</scroll-view>

			</view>

			<!-- 最近热播 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>最近热播
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_rb" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 新片推荐 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>新片推荐
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_news" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 排行榜滑动 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>排行榜
				</view>
				<view class="list_title">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="scroll-view-item_H" :class="noticeList == index?'text-bold':''" @tap="notice(index,2,item.type_id)" v-for="(item,index) in reclassify" :key="index">
							{{item.type_name}}榜
						</view>

					</scroll-view>
				</view>
				<view class="plate_detail plate_swiper">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="scroll-view-item_H" v-for="(item,index) in movie_rank" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
								<view class="plate_mark">
									{{index+1}}
								</view>
							</view>
							<span>{{item.vod_name}}</span>
						</view>

						<!-- <view class="scroll-view-item_H">
							<view class="plate_img">
								
							</view>
						</view> -->

					</scroll-view>

				</view>
				<view class="plate_handle btn_bg">
					<button class="cu-btn" @tap="rankGo(2)">查看完整榜单<text class="lg text-gray cuIcon-right"></text></button>

				</view>
			</view>







			<!-- 经典港台 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>经典港台
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_gp" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">{{item.vod_total}}集全</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>

					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 欧美精选 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>欧美精选
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_om" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 卫视热播剧，一次看过瘾 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>卫视热播剧，一次看过瘾
				</view>
				<view class="plate_big">
					<a href="#">
						<view class="plate_img">
							<img src="../../static/image/anime1.jpg" alt="">
							<view class="video_info">更新至720集</view>
						</view>
						<span>火影</span>
						<font>火之意志</font>
					</a>
				</view>
				<view class="plate_detail_across">
					<ul>
						<li>
							<a href="#">
								<view class="plate_img">
									<img src="../../static/image/anime1.jpg" alt="">
									<view class="video_info">更新至720集</view>
								</view>
								<span>火影</span>
								<font>火之意志</font>
							</a>
						</li>
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					<!-- <button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button> -->
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 日韩热播 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>日韩热播
				</view>
				<view class="plate_big">
					<a href="#">
						<view class="plate_img">
							<img src="../../static/image/anime1.jpg" alt="">
							<view class="video_info">更新至720集</view>
						</view>
						<span>火影</span>
						<font>火之意志</font>
					</a>
				</view>
				<view class="plate_detail_across">
					<ul>
						<li>
							<a href="#">
								<view class="plate_img">
									<img src="../../static/image/anime1.jpg" alt="">
									<view class="video_info">更新至720集</view>
								</view>
								<span></span>
								<font></font>
							</a>
						</li>
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					<!-- <button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button> -->
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 古装玄幻 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>古装玄幻
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in tv_gz" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
							<font>{{item.vod_sub}}</font>
						</li>
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					<!-- <button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button> -->
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 宝藏爱情 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>宝藏爱情
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in tv_love" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{itme.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
							<font>{{item.vod_sub}}</font>
						</li>
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>



		</view>


		<!-- 综艺 -->
		<view v-if="TabCur==3" class="tab_plate">
			<!-- z综艺分类导航 -->
			<view class="reclassify">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="(item,index) in reclassify" :key="index" @tap="typeGo(3,item.type_id,index)">
						{{item.type_name}}
					</view>
				</scroll-view>

			</view>
			<!-- 最近热播 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>最近热播
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_rb" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>

							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 最新推荐 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>最新推荐
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_news" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>



			<!-- 高分精选 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>高分精选
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in show_gf" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 日韩热门 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>日韩热门
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in show_rh" :key="index">
							<view class="plate_img">
								<img :src="item.vod_pic">
								<view class="video_info">更新至{{item.vod_total}}集</view>
							</view>
							<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 真人秀追不停 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>真人秀追不停
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in show_trueman" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 经典节目不可错过 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>经典节目不可错过
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in show_jd" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
								<font>{{item.vod_sub}}</font>
						</li>
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					<!-- <button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button> -->
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>





		</view>

		<!-- 动漫 -->
		<view v-if="TabCur==4" class="tab_plate">
			<!-- 动漫分类导航 -->
			<view class="reclassify">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="(item,index) in reclassify" :key="index" @tap="typeGo(4,item.type_id,index)">
						{{item.type_name}}
					</view>
				</scroll-view>
			</view>
			
			<!-- 人气动漫 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>人气动漫
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_rb" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 新番推荐 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>新番推荐
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in movie_news" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
						</li>						
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>



			<!-- 高分精选 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>高分精选
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in show_gf" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


			<!-- 热血青春 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>热血青春
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in anime_youth" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 高甜来袭 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>高甜来袭
				</view>
				<view class="plate_detail">
					<ul>
						<li v-for="(item,index) in anime_sweet" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
						</li>
					</ul>
				</view>
				<view class="plate_handle">
					<button class="cu-btn">更多<text class="lg text-gray cuIcon-right"></text></button>
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>

			<!-- 烧脑推理 -->
			<view class="plate">
				<view class="plate_title">
					<span></span>烧脑推理
				</view>
				<view class="plate_detail_across">
					<ul>
						<li v-for="(item,index) in anime_spy" :key="index">
								<view class="plate_img">
									<img :src="item.vod_pic">
									<view class="video_info">更新至{{item.vod_total}}集</view>
								</view>
								<span>{{item.vod_name}}</span>
								<font>{{item.vod_sub}}</font>
						</li>
					</ul>
				</view>
				<view class="plate_handle btn_bg">
					<button class="cu-btn">换一换<text class="lg text-gray cuIcon-refresh"></text></button>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				InputBottom: 0,
				noticeList:0,//榜单
				page:1,
				typeClass:'',
				tabList: [{
						tab_id: 1,
						tabTitle: '推荐'
					},
					{
						tab_id: 2,
						tabTitle: '电影'
					},
					{
						tab_id: 3,
						tabTitle: '电视剧'
					},
					{
						tab_id: 4,
						tabTitle: '综艺'
					},
					{
						tab_id: 5,
						tabTitle: '动漫'
					}
				],
				cardCur: 0,
				swiperList: [],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				reclassify: [], //二级分类
				today_vod: [], //推荐-今日推荐
				nd_vod: [], //推荐-内地热播
				movie_vod: [], //推荐-电影推荐
				zy_vod: [], //推荐-热播综艺
				dm_vod: [], //推荐-动漫新番
				movie_rb: [], //电影 电视剧 综艺 动漫-最近热播
				movie_news: [], //电影 电视剧 综艺 动漫-新片推荐
				movie_rank: [], //电影 电视剧-排行榜
				movie_yg: [], //电影-预告
				movie_action: [], //电影-动作片
				movie_om: [], //电影 电视-欧美
				movie_gp: [], //电影 电视-港片
				movie_kb: [], //电影恐怖片
				movie_cartoon: [], //电影-动画片
				tv_gz: [], //电视-古装
				tv_love: [], //电视-爱情
				show_gf: [], //综艺 动漫-高分
				show_rh: [], //综艺-日韩 
				show_trueman: [], //综艺-真人秀
				show_jd: [], //综艺-经典 
				anime_youth: [], //动漫-热血青春
				anime_sweet: [], //动漫-高甜
				anime_spy:[] //动漫-推理
			}

		},
		onLoad() {
			
			let user_mes = uni.getStorageSync('user_info');
			let visitor_code = uni.getStorageSync('vi_hash');
			// console.log(user_mes);
			let hash = visitor_code.hash;
			// console.log(hash);
			uni.request({
				url: 'http://221.234.36.126:82/api.php/Index/home',
				data: {
					token: '1CECE2221211DDCB613882C3311EC670',
					type: 1,
					hash: visitor_code
				},
				method: 'GET',
				header: {
					'content-type': 'application/json;charset=UTF-8'
				},
				success: (res) => {
					// let swiperList = res.data.data.banner;
					// let today_vod = res.data.data.today_vod.list;
					// let nd_vod = res.data.data.nd_vod.list;
					// let dy_vod = res.data.data.dy_vod.list;
					this.swiperList = res.data.data.banner;
					this.today_vod = res.data.data.today_vod.list;
					this.nd_vod = res.data.data.nd_vod.list;
					this.movie_vod = res.data.data.dy_vod.list;
					console.log(res.data.data);
				}
			});
			this.TowerSwiper('swiperList');
		},
		methods: {
			// 跳转至电影分类展示页面
			typeGo(typeid1,typeid,index){
				let tabindex = index + 1;
				uni.navigateTo({
					url:'/pages/movie/movie?typeid1='+typeid1+'&typeid='+typeid+'&index='+index
				})
			},
			// 排行榜切换
			notice(index,type,typeid){
				this.noticeList = index;
				this.typeClass = typeid;
				uni.request({
					url:'http://221.234.36.126:82/api.php/Vod/order_video',
					method:'POST',
					data:{
						token: '1CECE2221211DDCB613882C3311EC670',
						page:1,
						limit:10,
						type_id_1:type,
						type_id:typeid
					},
					success: (res) => {
						// console.log(res.data);
						this.movie_rank = res.data.list;
					}
				})
			},
			// 查看完整榜单
			rankGo(typeid1){
				uni.navigateTo({
					url:'/pages/list/list?typeid1='+typeid1+'&typeid='+this.typeClass+'&index='+this.noticeList
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height;
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			// 顶部导航切换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.page = 1;
				this.noticeList = 0;
				let type_id = e.currentTarget.dataset.id - 1 + 2;
				const visitor_code = uni.getStorageSync('vi_hash');
				let hash = visitor_code.hash;
				uni.request({
					url: 'http://221.234.36.126:82/api.php/Index/home',
					data: {
						token: '1CECE2221211DDCB613882C3311EC670',
						type: type_id,
						hash: hash
					},
					method: 'POST',
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						let dataList = res.data.data;
						console.log(dataList);
						let banner = dataList.banner;
						this.swiperList = banner;
						this.TowerSwiper('swiperList');
						if (type_id != 1) {
							let reclassifyList = dataList.cate_child;
							let rbList = dataList.rb_vod;
							let newList = dataList.new_vod;
							this.reclassify = reclassifyList;
							this.movie_rb = rbList.list;
							this.movie_news = newList.list;
							// console.log(reclassifyList);
						}
						if(type_id==2||type_id==3){
							let rankList = dataList.px_vod_list;
							let omList = dataList.om_vod;
							let gpList = dataList.gp_vod;
							this.movie_rank = rankList.list;
							this.movie_om = omList.list;
							this.movie_gp = gpList.list;
						}
						if (type_id == 2) {
							let ygList = dataList.yg_vod;
							let actionList = dataList.dz_vod;
							let kbList = dataList.kb_vod;
							let dhList = dataList.dh_vod;
							this.movie_yg = ygList.list;
							this.movie_action = actionList.list;
							this.movie_kb = kbList.list;
							this.movie_cartoon = dhList.list;
						}
						if (type_id == 3) {
							let gzList = dataList.gz_vod;
							let aqList = dataList.aq_vod;
							this.tv_gz = gzList.list;
							this.tv_love = aqList.list;
						}
						if (type_id == 4) {
							let gfList = dataList.score_vod;
							let rhList = dataList.rh_vod;
							let truemanList = dataList.zr_vod;
							let jdList = dataList.jd_vod;
							this.show_gf = gfList.list;
							this.show_rh = rhList.list;
							this.show_trueman = truemanList.list;
							this.show_jd = jdList.list;
						}
						if(type_id == 5){
							let gfList = dataList.score_vod;
							let youthList = dataList.rx_vod;
							let sweetList = dataList.gt_vod;
							let spyList = dataList.sn_vod;
							this.show_gf = gfList.list;
							this.anime_youth = youthList.list;
							this.anime_sweet = sweetList.list;
							this.anime_spy = spyList.list;
						}

					}
				})
			},
			//换一换
			
			vodChangeOrder(type_id_1,order){
				let page = this.page;
				page++;
				
				uni.request({
					url:"http://221.234.36.126:82/api.php/Vod/ajax_video",
					data:{
						token: '1CECE2221211DDCB613882C3311EC670',
						type_id_1:type_id_1,
						page:page,
						order:order
					},
					method: 'POST',
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						if(order == 1){
							
							this.movie_rb = res.data.list;
						}
						if(order == 2){
							this.movie_news = res.data.list;
						}
					}
				});
				this.page = page;
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2));
					list[i].mLeft = i - parseInt(list.length / 2);
				}
				this.swiperList = list;
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = "";
				this.swiperList = this.swiperList;
			},
			moreGo(){
				uni.navigateTo({
					url:'/pages/more/more'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cu-bar {
		width: 750rpx;
		background-color: #000000;
	}

	.cu-bar .search-form {
		background-color: #474646;
		color: #FFDE00;
	}

	.cu-bar .action img {
		width: 45rpx;
		height: 45rpx;
	}

	.nav {
		background-color: #000000;
	}

	.nav .cu-item {
		margin: 0 20rpx;
	}

	.screen-swiper {
		width: 100%;
	}

	.uni-swiper-dot {
		background: rgba(255, 255, 255, 1);
	}
	
	.tab_plate{
		width: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	.classes {
		width: 750rpx;
	}

	.classes ul {
		width: 100%;
		display: flex;
	}

	.classes ul li {
		width: 25%;
		padding: 40rpx 0;
	}

	/* 	.classes ul li a {
		display: block;
		width: 100%;
		
	} */

	.classes ul li img {
		display: block;
		width: 68rpx;
		margin: 0 auto;
		width: 68rpx;
		height: 68rpx;
	}

	.classes ul li span {
		display: block;
		text-align: center;
		margin-top: 17rpx;
		font-size: 26rpx;
		color: #4E4D4D;
	}

	.reclassify {
		width: 750rpx;
		height: 80rpx;
		margin-top: 50rpx;
		margin-bottom: 40rpx;
	}

	.reclassify .scroll-view_H {
		width: 750rpx;
		height: 80rpx;
		box-sizing: border-box;
		padding-left: 40rpx;
		text-align: left;
		display: flex;
		flex-wrap: nowrap;
	}

	.reclassify .scroll-view_H .scroll-view-item_H {
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: inline-block;
		background-color: #F7F6F6;
		color: #0084FF;
		margin-right: 20rpx;
		text-align: center;
	}



	.plate {
		width: 750rpx;
	}

	.plate_title {
		width: 750rpx;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
		font-size: 32rpx;
		font-weight: 600;
		height: 104rpx;
	}

	.plate_title span {
		width: 18rpx;
		height: 18rpx;
		background-color: #00A7FF;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.plate_detail {
		width: 100%;
	}

	.plate_detail ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.plate_detail ul li {
		width: 240rpx;
	}

	/* 	.plate_detail ul li a {
		display: block;
		width: 240rpx;
	} */

	.plate_img {
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.plate_img img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.video_info {
		width: 100%;
		text-align: right;
		position: absolute;
		bottom: 0;
		left: 0;
		color: #ffffff;
		padding-right: 20rpx;
		background: linear-gradient(0deg, rgba(50, 50, 50, 1) 0%, rgba(255, 255, 255, 0.1) 40%);
		height: 300rpx;
		line-height: 540rpx;
	}

	.plate_detail ul li span {
		display: block;
		width: 100%;
		height: 78rpx;
		line-height: 72rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.text-white {
		color: #FBDB03;
	}

	.plate_handle {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		padding-bottom: 40px;
		margin-top: 45rpx;
	}

	.plate_handle button {
		display: block;
		width: 306rpx;
		height: 72rpx;
		line-height: 72rpx;
	}

	.plate_handle button text {
		color: #00A7FF;
		margin-left: 5rpx;
	}

	.plate_detail_across {
		width: 100%;
	}

	.plate_detail_across ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.plate_detail_across ul li {
		width: 365rpx;
	}

	/* 	.plate_detail_across ul li a {
		display: block;
		width: 365rpx;
	}
 */
	.plate_detail_across ul li .plate_img {
		height: 244rpx;
		width: 365rpx;
	}

	.plate_detail_across ul li .plate_img img {
		width: 365rpx;
		height: 244rpx;
	}

	.plate_detail_across ul li .plate_img .video_info {
		height: 244rpx;
		line-height: 420rpx;
	}

	.plate_detail_across ul li span {
		display: block;
		width: 100%;
		height: 55rpx;
		line-height: 72rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		text-align: left;
	}

	.plate_detail_across ul li font {
		display: block;
		width: 100%;
		height: 60rpx;
		line-height: 50rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: left;
	}

	.plate_big {
		width: 100%;
	}

	/* 	.plate_big a {
		display: block;
		width: 100%;
	} */

	.plate_big .plate_img {
		width: 100%;
		height: 400rpx;
	}

	.plate_big .plate_img img {
		width: 100%;
		height: 400rpx;
	}

	.plate_big .plate_img .video_info {
		height: 400rpx;
		line-height: 720rpx;
	}

	.plate_big span {
		display: block;
		width: 100%;
		height: 55rpx;
		line-height: 72rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		text-align: left;
	}

	.plate_big font {
		display: block;
		width: 100%;
		height: 60rpx;
		line-height: 50rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: left;
	}

	.btn_bg button {
		width: 100%;
	}

	.scroll-view_H {
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 150rpx;
		height: 70upx;
		line-height: 30upx;
		text-align: center;
		font-size: 30rpx;
	}

	.plate_swiper .scroll-view-item_H {
		width: 190rpx;
		height: 354upx;
		margin-right: 20rpx;
	}

	.plate_swiper .scroll-view-item_H:first-of-type {
		margin-left: 20rpx;
	}

	.plate_swiper .scroll-view-item_H span {
		display: block;
		width: 100%;
		height: 55rpx;
		line-height: 72rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 	.plate_swiper .scroll-view-item_H:last-of-type{
		width: 190rpx;
		height: 300rpx;
		background-color: #EEEEEE;
		display: flex;
		align-items: center;
	} */

	.plate_mark {
		position: absolute;
		font-size: 30rpx;
		width: 50rpx;
		height: 73rpx;
		top: 0;
		left: 0;
		background-image: url(../../static/plate4.png);
		font-weight: 600;
		font-style: italic;
		color: #ffffff;
		padding-top: 15rpx;
		text-align: left;
		padding-left: 10rpx;
		background-position: 50% 50%;
		background-size: cover;
	}

	.plate_swiper .scroll-view-item_H:first-of-type .plate_mark {
		background-image: url(../../static/plate1.png);
	}

	.plate_swiper .scroll-view-item_H:nth-of-type(2) .plate_mark {
		background-image: url(../../static/plate2.png);
	}

	.plate_swiper .scroll-view-item_H:nth-of-type(3) .plate_mark {
		background-image: url(../../static/plate3.png);
	}

	.plate_swiper .scroll-view-item_H:nth-of-type(10) .plate_mark {
		padding-left: 5rpx;
	}

	.adv_mark {
		position: absolute;
		width: 90rpx;
		height: 44rpx;
		line-height: 44rpx;
		top: 0;
		right: 20rpx;
		background-image: url(../../static/adv_mark.png);
		text-align: center;
		color: #ffffff;
		font-size: 26rpx;
		background-position: 50% 50%;
		background-size: cover;
	}
</style>
